<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>热门促销 - 社交商城</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f5f5f5;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding-bottom: 70px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: white;
      padding: 12px 15px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin: 0;
    }
    
    /* 搜索栏 */
    .search-container {
      padding: 10px 15px;
      background-color: white;
    }
    
    .search-box {
      position: relative;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      border-radius: 8px;
      border: 1px solid #eee;
      font-size: 14px;
      background-color: #f5f5f5;
    }
    
    .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
    }
    
    /* 筛选栏 */
    .filter-bar {
      display: flex;
      overflow-x: auto;
      padding: 8px 15px;
      background-color: white;
      border-top: 1px solid #eee;
      scrollbar-width: none;
    }
    
    .filter-bar::-webkit-scrollbar {
      display: none;
    }
    
    .filter-item {
      white-space: nowrap;
      padding: 6px 14px;
      margin-right: 8px;
      border-radius: 20px;
      font-size: 14px;
      background-color: #f5f5f5;
      color: #666;
      border: none;
    }
    
    .filter-item.active {
      background-color: #ff4d4f;
      color: white;
    }
    
    /* 促销列表 */
    .promotion-list {
      padding: 10px;
    }
    
    .promotion-item {
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 10px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    /* 图片容器 */
    .promo-images {
      display: flex;
      height: 160px;
    }
    
    .promo-image {
      flex: 1;
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    
    .promo-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s;
    }
    
    .promo-image img:hover {
      transform: scale(1.05);
    }
    
    .image-count {
      position: absolute;
      right: 8px;
      bottom: 8px;
      background-color: rgba(0,0,0,0.5);
      color: white;
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 10px;
    }
    
    /* 无图样式 */
    .no-image {
      height: 120px;
      background-color: #fff0f0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ff4d4f;
      flex-direction: column;
    }
    
    .no-image i {
      font-size: 36px;
      margin-bottom: 8px;
    }
    
    .no-image-text {
      font-size: 14px;
      font-weight: 500;
    }
    
    /* 内容区域 */
    .promo-content {
      padding: 15px;
    }
    
    .promo-title {
      font-size: 17px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .promo-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 13px;
      color: #666;
      margin-bottom: 10px;
    }
    
    .meta-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    .promo-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 10px;
    }
    
    .promo-tag {
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 12px;
    }
    
    .tag-hot {
      background-color: #fff1f0;
      color: #ff4d4f;
    }
    
    .tag-new {
      background-color: #f6ffed;
      color: #52c41a;
    }
    
    .tag-limited {
      background-color: #fff7e6;
      color: #faad14;
    }
    
    .promo-desc {
      font-size: 14px;
      color: #555;
      line-height: 1.5;
      margin-bottom: 12px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    /* 价格和操作区 */
    .promo-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 10px;
      border-top: 1px dashed #eee;
    }
    
    .price-info {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }
    
    .original-price {
      font-size: 13px;
      color: #999;
      text-decoration: line-through;
    }
    
    .current-price {
      font-size: 18px;
      font-weight: 600;
      color: #ff4d4f;
    }
    
    .discount {
      font-size: 12px;
      background-color: #ff4d4f;
      color: white;
      padding: 1px 6px;
      border-radius: 4px;
    }
    
    .action-btn {
      padding: 6px 16px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
      text-decoration: none;
    }
    
    .nav-item.active {
      color: #ff4d4f;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 加载更多 */
    .load-more {
      text-align: center;
      padding: 15px;
    }
    
    .load-more-btn {
      padding: 8px 20px;
      border-radius: 20px;
      font-size: 14px;
      background-color: white;
      border: 1px solid #eee;
      color: #666;
    }
    
    /* 视图切换 */
    .view-controls {
      display: flex;
      justify-content: flex-end;
      padding: 8px 15px;
      background-color: white;
      border-top: 1px solid #eee;
    }
    
    .view-btn {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      border: 1px solid #eee;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999;
      margin-left: 8px;
    }
    
    .view-btn.active {
      background-color: #ff4d4f;
      color: white;
      border-color: #ff4d4f;
    }
    
    /* 网格视图 */
    .promotion-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 10px;
      display: none;
    }
    
    .grid-item {
      background-color: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .grid-image {
      height: 120px;
      position: relative;
    }
    
    .grid-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .grid-no-image {
      height: 120px;
      background-color: #f0f7ff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #1890ff;
    }
    
    .grid-no-image i {
      font-size: 24px;
    }
    
    .grid-content {
      padding: 10px;
    }
    
    .grid-title {
      font-size: 14px;
      font-weight: 500;
      color: #333;
      margin-bottom: 5px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.3;
    }
    
    .grid-price {
      font-size: 15px;
      font-weight: 600;
      color: #ff4d4f;
      margin-bottom: 5px;
    }
    
    .grid-tag {
      display: inline-block;
      padding: 1px 5px;
      border-radius: 3px;
      font-size: 10px;
      margin-right: 3px;
    }
    
    .grid-meta {
      font-size: 11px;
      color: #888;
      margin-top: 5px;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav d-flex justify-content-between align-items-center">
    <button class="btn btn-link p-0 text-dark">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">热门促销</h1>
    <button class="btn btn-link p-0 text-dark">
      <i class="fa fa-shopping-cart"></i>
    </button>
  </div>
  
  <!-- 搜索栏 -->
  <div class="search-container">
    <div class="search-box">
      <i class="fa fa-search search-icon"></i>
      <input type="text" class="search-input" placeholder="搜索促销活动、商品...">
    </div>
  </div>
  
  <!-- 筛选栏 -->
  <div class="filter-bar">
    <button class="filter-item active">全部促销</button>
    <button class="filter-item">限时折扣</button>
    <button class="filter-item">满减活动</button>
    <button class="filter-item">新品特惠</button>
    <button class="filter-item">会员专享</button>
    <button class="filter-item">组合优惠</button>
    <button class="filter-item">赠品活动</button>
  </div>
  
  <!-- 视图切换 -->
  <div class="view-controls">
    <button class="view-btn active" id="list-view-btn" title="列表视图">
      <i class="fa fa-list"></i>
    </button>
    <button class="view-btn" id="grid-view-btn" title="网格视图">
      <i class="fa fa-th-large"></i>
    </button>
  </div>
  
  <!-- 列表视图 -->
  <div class="promotion-list" id="list-view">
    <!-- 多图促销 -->
    <div class="promotion-item">
      <div class="promo-images">
        <div class="promo-image">
          <img src="https://picsum.photos/400/300?random=1" alt="促销商品">
        </div>
        <div class="promo-image">
          <img src="https://picsum.photos/400/300?random=2" alt="促销商品">
        </div>
        <div class="promo-image">
          <img src="https://picsum.photos/400/300?random=3" alt="促销商品">
          <div class="image-count">+2</div>
        </div>
      </div>
      <div class="promo-content">
        <h3 class="promo-title">秋季服饰大促 全场3折起 满300减50</h3>
        <div class="promo-meta">
          <div class="meta-item"><i class="fa fa-calendar"></i> 10.26-10.31</div>
          <div class="meta-item"><i class="fa fa-eye"></i> 2.3k人看过</div>
          <div class="meta-item"><i class="fa fa-shop"></i> 时尚服饰旗舰店</div>
        </div>
        <div class="promo-tags">
          <span class="promo-tag tag-hot">热门</span>
          <span class="promo-tag tag-limited">限时</span>
          <span class="promo-tag">满减</span>
        </div>
        <p class="promo-desc">
          秋季新款服饰全场3折起，叠加满300减50、满500减100优惠，更有精美配饰赠送，数量有限，先到先得！
        </p>
        <div class="promo-actions">
          <div class="price-info">
            <span class="current-price">¥199</span>
            <span class="original-price">¥599</span>
            <span class="discount">3.3折</span>
          </div>
          <button class="btn btn-danger action-btn">立即抢购</button>
        </div>
      </div>
    </div>
    
    <!-- 单图促销 -->
    <div class="promotion-item">
      <div class="promo-images">
        <div class="promo-image" style="flex: 100%">
          <img src="https://picsum.photos/800/400?random=4" alt="促销商品">
        </div>
      </div>
      <div class="promo-content">
        <h3 class="promo-title">年度会员特惠 买一年送三个月 再享全场85折</h3>
        <div class="promo-meta">
          <div class="meta-item"><i class="fa fa-calendar"></i> 10.25-11.11</div>
          <div class="meta-item"><i class="fa fa-eye"></i> 5.7k人看过</div>
          <div class="meta-item"><i class="fa fa-shop"></i> 视频会员中心</div>
        </div>
        <div class="promo-tags">
          <span class="promo-tag tag-new">新品</span>
          <span class="promo-tag">会员</span>
        </div>
        <p class="promo-desc">
          年度会员限时特惠，现在购买即送三个月会员时长，会员期间全场商品享85折优惠，更有专属内容提前看。
        </p>
        <div class="promo-actions">
          <div class="price-info">
            <span class="current-price">¥198</span>
            <span class="original-price">¥298</span>
            <span class="discount">6.6折</span>
          </div>
          <button class="btn btn-danger action-btn">立即开通</button>
        </div>
      </div>
    </div>
    
    <!-- 无图促销 -->
    <div class="promotion-item">
      <div class="no-image">
        <i class="fa fa-gift"></i>
        <div class="no-image-text">限时福利活动</div>
      </div>
      <div class="promo-content">
        <h3 class="promo-title">邀请好友注册 双方各得50元无门槛券</h3>
        <div class="promo-meta">
          <div class="meta-item"><i class="fa fa-calendar"></i> 长期有效</div>
          <div class="meta-item"><i class="fa fa-eye"></i> 12.8k人参与</div>
          <div class="meta-item"><i class="fa fa-shop"></i> 平台福利</div>
        </div>
        <div class="promo-tags">
          <span class="promo-tag tag-hot">热门</span>
          <span class="promo-tag">邀请有礼</span>
        </div>
        <p class="promo-desc">
          成功邀请新用户注册并完成实名认证，邀请者和被邀请者均可获得50元无门槛优惠券，可用于平台所有商品消费。
        </p>
        <div class="promo-actions">
          <div class="price-info">
            <span class="current-price">¥50</span>
            <span class="original-price">免费获取</span>
          </div>
          <button class="btn btn-danger action-btn">立即邀请</button>
        </div>
      </div>
    </div>
    
    <!-- 多图促销 -->
    <div class="promotion-item">
      <div class="promo-images">
        <div class="promo-image">
          <img src="https://picsum.photos/400/300?random=5" alt="促销商品">
        </div>
        <div class="promo-image">
          <img src="https://picsum.photos/400/300?random=6" alt="促销商品">
        </div>
      </div>
      <div class="promo-content">
        <h3 class="promo-title">智能家居组合套装 直降500元 赠安装服务</h3>
        <div class="promo-meta">
          <div class="meta-item"><i class="fa fa-calendar"></i> 10.28-11.5</div>
          <div class="meta-item"><i class="fa fa-eye"></i> 1.8k人看过</div>
          <div class="meta-item"><i class="fa fa-shop"></i> 智能家居体验馆</div>
        </div>
        <div class="promo-tags">
          <span class="promo-tag tag-limited">限量</span>
          <span class="promo-tag">组合优惠</span>
        </div>
        <p class="promo-desc">
          智能家居三件套（智能音箱+智能灯+智能插座）特价促销，直降500元，购买即赠专业安装服务，数量有限。
        </p>
        <div class="promo-actions">
          <div class="price-info">
            <span class="current-price">¥899</span>
            <span class="original-price">¥1399</span>
            <span class="discount">6.4折</span>
          </div>
          <button class="btn btn-danger action-btn">立即购买</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 网格视图 -->
  <div class="promotion-grid" id="grid-view">
    <!-- 网格项1 - 多图 -->
    <div class="grid-item">
      <div class="grid-image">
        <img src="https://picsum.photos/400/300?random=1" alt="促销商品">
        <div class="image-count">+2</div>
      </div>
      <div class="grid-content">
        <h3 class="grid-title">秋季服饰大促 全场3折起 满300减50</h3>
        <div>
          <span class="grid-tag tag-hot">热门</span>
          <span class="grid-tag tag-limited">限时</span>
        </div>
        <div class="grid-price">¥199 <span class="original-price" style="font-size: 11px">¥599</span></div>
        <div class="grid-meta"><i class="fa fa-calendar"></i> 10.26-10.31</div>
      </div>
    </div>
    
    <!-- 网格项2 - 单图 -->
    <div class="grid-item">
      <div class="grid-image">
        <img src="https://picsum.photos/400/300?random=4" alt="促销商品">
      </div>
      <div class="grid-content">
        <h3 class="grid-title">年度会员特惠 买一年送三个月</h3>
        <div>
          <span class="grid-tag tag-new">新品</span>
          <span class="grid-tag">会员</span>
        </div>
        <div class="grid-price">¥198 <span class="original-price" style="font-size: 11px">¥298</span></div>
        <div class="grid-meta"><i class="fa fa-calendar"></i> 10.25-11.11</div>
      </div>
    </div>
    
    <!-- 网格项3 - 无图 -->
    <div class="grid-item">
      <div class="grid-no-image">
        <i class="fa fa-gift"></i>
      </div>
      <div class="grid-content">
        <h3 class="grid-title">邀请好友注册 双方各得50元券</h3>
        <div>
          <span class="grid-tag tag-hot">热门</span>
        </div>
        <div class="grid-price">¥50 <span class="original-price" style="font-size: 11px">免费</span></div>
        <div class="grid-meta"><i class="fa fa-calendar"></i> 长期有效</div>
      </div>
    </div>
    
    <!-- 网格项4 - 多图 -->
    <div class="grid-item">
      <div class="grid-image">
        <img src="https://picsum.photos/400/300?random=5" alt="促销商品">
        <div class="image-count">+1</div>
      </div>
      <div class="grid-content">
        <h3 class="grid-title">智能家居组合套装 直降500元</h3>
        <div>
          <span class="grid-tag tag-limited">限量</span>
        </div>
        <div class="grid-price">¥899 <span class="original-price" style="font-size: 11px">¥1399</span></div>
        <div class="grid-meta"><i class="fa fa-calendar"></i> 10.28-11.5</div>
      </div>
    </div>
  </div>
  
  <!-- 加载更多 -->
  <div class="load-more">
    <button class="load-more-btn">
      <i class="fa fa-refresh"></i> 加载更多促销
    </button>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-fire nav-icon"></i>
      <span>促销</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-compass nav-icon"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user-o nav-icon"></i>
      <span>我的</span>
    </a>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 筛选按钮切换
    const filterItems = document.querySelectorAll('.filter-item');
    filterItems.forEach(item => {
      item.addEventListener('click', function() {
        filterItems.forEach(i => i.classList.remove('active'));
        this.classList.add('active');
        // 实际应用中这里会触发筛选逻辑
      });
    });
    
    // 视图切换
    const listViewBtn = document.getElementById('list-view-btn');
    const gridViewBtn = document.getElementById('grid-view-btn');
    const listView = document.getElementById('list-view');
    const gridView = document.getElementById('grid-view');
    
    listViewBtn.addEventListener('click', function() {
      listViewBtn.classList.add('active');
      gridViewBtn.classList.remove('active');
      listView.style.display = 'block';
      gridView.style.display = 'none';
    });
    
    gridViewBtn.addEventListener('click', function() {
      gridViewBtn.classList.add('active');
      listViewBtn.classList.remove('active');
      gridView.style.display = 'grid';
      listView.style.display = 'none';
    });
    
    // 操作按钮功能
    const actionButtons = document.querySelectorAll('.action-btn');
    actionButtons.forEach(button => {
      button.addEventListener('click', function() {
        const actionText = this.textContent.trim();
        const title = this.closest('.promotion-item').querySelector('.promo-title').textContent;
        alert(`您点击了"${actionText}"：${title}`);
      });
    });
    
    // 网格项点击事件
    const gridItems = document.querySelectorAll('.grid-item');
    gridItems.forEach(item => {
      item.addEventListener('click', function() {
        const title = this.querySelector('.grid-title').textContent;
        alert(`查看详情：${title}`);
      });
    });
    
    // 加载更多功能
    document.querySelector('.load-more-btn').addEventListener('click', function() {
      const btn = this;
      btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 加载中...';
      
      // 模拟加载延迟
      setTimeout(() => {
        btn.innerHTML = '<i class="fa fa-refresh"></i> 加载更多促销';
        alert('已加载全部促销活动');
      }, 1500);
    });
    
    // 搜索功能
    const searchInput = document.querySelector('.search-input');
    searchInput.addEventListener('keydown', function(e) {
      if (e.key === 'Enter') {
        e.preventDefault();
        const searchText = this.value.trim();
        if (searchText) {
          alert(`搜索促销：${searchText}`);
        }
      }
    });
  </script>
</body>
</html>
